<template>
	<view style="padding:5px 3%;">
		<view>
			<image style="width: 100%; height: 300rpx;" src="/static/banner4.jpg"></image>
		</view>
		<view style="padding:25rpx 50rpx; background:#F5F6F7">
			<graceSearch @confirm="confirm" :kwd="searchKey"></graceSearch>
		</view>
		<view style="color: #FF3A30;text-align: left; font-size: 23rpx; margin-bottom: 10rpx; margin-top: 10rpx; margin-left: 10rpx;">
			<text style="font-weight: bold;">发热门诊医院：</text>
			<text>进行预检分诊和一般发热患者的诊疗的医院。</text>
		</view>
		<view class="echartsIn">
			<mpvue-echarts lazyLoad :echarts="echarts" :onInit="mapInit2" ref="echarts4" canvasId="map" />
		</view>
		
		<view class="grace-accordion grace-margin-top">
			
			<view class="grace-accordion-items" v-for="(item,index) in provinceData" :key="index">
				<view class="grace-accordion-title grace-bg-blue" :id="'grace-accordion-'+index" @tap="changeAccordion" hover-stay-time="100" hover-class="grace-opacity">
					<text class="grace-icons">{{item.label}}</text>
					<text class="grace-list-imgs-arrow grace-icons icon-arrow-up" v-if="accordionActive == 'grace-accordion-'+index"></text>
					<text class="grace-list-imgs-arrow grace-icons icon-arrow-down" v-else></text>
				</view>
				<view :class="['grace-accordion-body', accordionActive == 'grace-accordion-'+index ? 'grace-accordion-show' : 'grace-accordion-hide']">
					<view class="grace-list">
						<view class="grace-list-items" v-for="(citem,cindex) in cityData[index]" :key="cindex" @click="goOutpatient(index,cindex)">
							<view class="grace-list-body grace-border-b">
								<view class="grace-list-title">
									<text class="grace-list-title-text">{{citem.label}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import provinceData from '@/graceUI/data/city-data/province.js';
	import cityData from '@/graceUI/data/city-data/city.js';
	import areaData from '@/graceUI/data/city-data/area.js';
	import graceSearch from "@/graceUI/components/graceSearch.vue";
	import * as echarts from '@/components/echarts/echarts.min.js';
	import mpvueEcharts from '@/components/echarts/echarts.vue';
	var chinaJs = require("@/components/echarts/china.js");
	var _self;
	export default {
		data() {
			return {
				echarts,
				mapData2:[],
				searchKey : "",
				accordionActive: "grace-accordion-0",
				provinceData:provinceData,
				cityData:cityData
			}
		},
		components:{
			graceSearch,
			mpvueEcharts
		},
		onLoad:function(){
			_self = this;
			chinaJs.registChinaMap(this.echarts);
			this.getProvinceHostpital();
			
		},
		methods: {
			changeAccordion : function(e){
				var accordionIndex = e.currentTarget.id;
				if (this.accordionActive == accordionIndex){accordionIndex = '';}
				this.accordionActive = accordionIndex;
			},
			getProvinceHostpital(){
				uni.request({
					url: this.serverUrl + '/feiyan/search-api/getProvinceHostpital',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: {
						type: 0
					},
					method: "POST",
					success: (r) => {
						// console.log(r);
						if (r.data.code == '000000') {
							this.mapData2 = [];
							for(var i=0;i<r.data.data.length;i++){
								this.mapData2.push({
									name: r.data.data[i].province.replace(/省|市|自治区|回族|壮族|维吾尔/g,''),
									value: r.data.data[i].count,
								});
							} 
							setTimeout(function (){
								_self.$refs.echarts4.init();
							}, 300);
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					}
				})		
			},
			mapInit2: function (canvas, width, height) {
				echarts.setCanvasCreator(() => canvas);
				let mapChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(mapChart)
				// mapChart.on('click', function(params){    
				// 	console.log(params);  
				// });
				mapChart.setOption(getMapOption2(_self.mapData2))
				return mapChart		
			},
			confirm : function (e) {
				this.searchKey = e;
				uni.navigateTo({
					url: '/pages/outpatient/outpatient?type=0&searchKey='+this.searchKey
				})
			},
			goOutpatient(pindex,cindex){
				uni.navigateTo({
					url: '/pages/outpatient/outpatient?type=0&pindex='+pindex+'&cindex='+cindex
				})
			},
		}
	}
	function getMapOption2(data) {
	    return {
			animation: false,
	        backgroundColor: '#F8F8F8',
			title: {
				text: '发热门诊统计',
				subtext: '',
				left: 'left',
				textStyle: {
					align: 'center',
					color: '#4d79f3',
					fontSize: 16,
				}
			},
			tooltip : {
				trigger: 'item' ,	
				position: [20, 20],
				enterable: true,
				formatter: function(params) {
					var name = params.name;
					var value = isNaN(params.value)?'0':params.value;
					return name+':'+value;
				},
			},
			visualMap: {
				// min: 0,
				// max: 1000,
				itemWidth:10,
				itemHeight:10,
				padding: 1,
				textGap:5, 
				right: 10,
				bottom: 40,
				showLabel: !0,
				// text: ["高", "低"],
				pieces: [{
					gt: 1000,
					label: "> 1000",
					color: "#7f1100"
				}, {
					gte: 500,
					lte: 999,
					label: "500 - 999",
					color: "#CD5C5C"
				}, {
					gte: 100,
					lte: 499,
					label: "100 - 499",
					color: "#ff5428"
				}, {
					gte: 10,
					lte: 99,
					label: "10 - 99",
					color: "#ff8c71"
				}, {
					gte: 1,
					lte: 9,
					label: "1 - 9",
					color: "#ffd768"
				}, {
					value: 0,
					color: "#ffffff"
				}],
				show: !0
			},
			series: [
				{
					name: '数据',
					type: 'map',
					mapType: 'china',
					roam: false,
					label: {
						normal: {
							show: true,  //省份名称
							textStyle: { color: '#000', fontSize: '5'},
							/* formatter: function(params) {
								return isNaN(params.value)?'':params.value;
							}, */
						},
						emphasis: { show: false }
					},
					itemStyle: {
						emphasis: {//鼠标移入高亮显颜色
							areaColor: '#87CEFA'
						}
					},
					data:data
				}
			]
	    }
	}		
</script>

<style>
@import "../../graceUI/animate.css";
.grace-accordion-show{height:auto; animation:fadeIn 300ms linear;}
.grace-accordion-hide{height:0; animation:fadeOut 300ms linear;}
.grace-accordion-title{color:#FFFFFF; margin-bottom: 2rpx;}
.grace-accordion-title .grace-icons:before{margin-right:10rpx; font-size:40rpx !important;}

.echartsIn{width:100%; height: 500upx;margin: 10rpx 0;}	

</style>
